var $dlgSearch = (function(){
  let cfg = {
        content:'',
        direction:'down',
        capitalSense:false,
        loop:false
      };

  let html=`
 <div class="notepad-dlg-search">
  <div class="dlalogbox">
    <div class="titlebar">
      <p class="title">查找</p>
      <span class="close-btn"> ✖   </span>
    </div>
    <div class="main">
    <div class="main-left">
      <label for="" class='search-text'>查找内容(N)：</label>
      <input type="text" class="search-content" autofocus>
      <br>
      <label  class="capital-sense"><input type="checkbox" value="capital-sense">区分大小写(C)</label>
      <legend class="direction">方向</legend>
      <label class="direction-up"><input type="radio" name="direction" value="up">向上(U)</label>
      <label class="direction-down"><input type="radio" name="direction" value="down" checked>向下(D)</label>
    </div>

    <div class="main-right">
      <input type="button" value="查找下一个(F)" class="btn-next" disabled>
      <input type="button" value="取消" class="btn-cancel">
    </div>

    <div class="bottombar">
      <label class='loop'><input type="checkbox" value="loop">循环(R)</label>
    </div>
    </div>
  </div>
</div>`

  let $dlg = $(html);
  
  let $btnClose = $dlg.find('.close-btn'),//关闭按钮
      $btnCancel = $dlg.find('.btn-cancel'),//取消按钮
      $textContent = $dlg.find('.search-content'),//查找文本框
      $btnSearch = $dlg.find('.btn-next'),//查找下一个
      $titleBar = $dlg.find('.titlebar'),//标题栏
      $dialogbox = $dlg.find('.dlalogbox'),//整体对话框
      $directionUp = $dlg.find('.direction-up'),//向上
      $directionDown = $dlg.find('.direction-down'),//向下
      $loop = $dlg.find('.loop'),
      $capitalSense = $dlg.find('.capital-sense');

  const init = (conf) => {
    //对话框可拖动
    $dialogbox.draggable({handle:$titleBar});
    $directionUp.removeAttr('checked');
    $directionDown.attr("checked",true);
    $dlg.find('input[type="checkbox"]').removeAttr('checked');
    $textContent.val(conf.content);
    $btnSearch.attr("disabled",$textContent.val()?false:true);
   
    
       $textContent.focus();
  }

  //点击x，关闭对话框
  const destoryDla=()=>{
    $dlg.remove();
  }

  //如果对话框为空，查找按钮无法作用
  const verifyContent = () => {
    if($textContent.val()!==''){
      $btnSearch.removeAttr('disabled');
    }else{
      $btnSearch.attr('disabled','disabled');
    }
  }

  const show=(conf)=>{
     // dom结构绘制
     $(conf.container).append($dlg);
     init(conf);
     //$.extend(cfg,conf);

     //一些事件绑定
     //取消和x时关闭对话框
     $btnClose.click(()=>{destoryDla()});
     $btnCancel.click(()=>{destoryDla()});
    
     //检验文本框
     $textContent.keyup(()=>{verifyContent()});
     $btnSearch.click(()=>{
        cfg.content=$textContent.val(),
        cfg.direction=$dlg.find('input[type="radio"]:checked').val(),
       cfg.capitalSense=$("input[value='capital-sense']").is(':checked'),
       cfg.loop=$("input[value='loop']").is(':checked')
       
       console.log(cfg)
     })
     $dlg.click(conf.onclick());
  } 

  return {
    show:show
  }
})()
